<template>
  <div style="position: relative;width: 100%; height: 100%;">
    <div class="header-box">
      <Header />
    </div>
    <!-- <img class="bg_img" src="http://image.utea88.com/statics/data_map_bg.jpg" alt=""/> -->
    <div class="main_section">
      <div class="main_wrapper">
      <!-- <ScreenAdapter> -->
        <div class="bg">
          <!-- <screenfull class="screenfull" id="screenfull" /> -->
          <div class="header">
            <img class="head_bg" src="http://image.utea88.com/statics/data_map_head_bg.png" alt="">
            <div class="title_bg">
              <h1 class="title">众茶国际产业大数据</h1>
              <h3 class="time">{{ date }}</h3>
            </div>
          </div>
          <div class="main_box">
            <div class="top_bg">
              <Corner class="corner">
                <div class="number_title">平台商户总数</div>
                <div class="number_count">{{ totalData.pthy || 0 }}</div>
              </Corner>
              <div class="row_space"></div>
              <Corner class="corner">
                <div class="number_title">平台活跃商户总数</div>
                <div class="number_count">{{ totalData.zhyhy || 0 }}</div>
              </Corner>
              <div class="row_space"></div>
              <Corner class="corner">
                <div class="number_title">月活跃商户总数</div>
                <div class="number_count">{{ totalData.yhyhy + 500 || 0 }}</div>
              </Corner>
              <div class="row_space"></div>
              <Corner class="corner">
                <div class="number_title">平台供应商数</div>
                <div class="number_count">{{ totalData.ptgys || 0 }}</div>
              </Corner>
              <div class="row_space"></div>
              <Corner class="corner">
                <div class="number_title">平台采购商数</div>
                <div class="number_count">{{ totalData.ptcgs || 0 }}</div>
              </Corner>
            </div>
            <div class="bottom_bg">
              <div class="section">
                <Corner :type="2" class="corner">
                  <PieChartData :dataList="pieChartDataList"/>
                </Corner>
                <div class="column_space"></div>
                <Corner :type="2" class="corner">
                  <LineChartData :dataList="lineChartDataList"/>
                </Corner>
              </div>
              <div class="row_space"></div>
              <div class="map_section">
                <Corner class="corner">
                  <div class="totalAmount_bg">
                    <div class="totalAmount_title">交易额: </div>
                    <CountTo class="totalAmount"  :startVal='oldTotalAmount' :endVal='newTotalAmount' :duration='3000' />
                  </div>
                </Corner>
                <div class="map_box">
                  <div class="map1"></div>
                  <div class="map2"></div>
                  <div class="map3"></div>
                  <div class="map">
                    <MapChartData/>
                  </div>
                </div>
              </div>
              <div class="row_space"></div>
              <div class="section">
                <Corner :type="2" class="corner">
                  <XBarChartData :times="times" :dataList="xBarChartDataList"/>
                </Corner>
                <div class="column_space"></div>
                <Corner :type="2" class="corner">
                  <BarChartData :times="times" :dataList="barChartDataList"/>
                </Corner>
              </div>
            </div>
          </div>
        </div>
      <!-- </ScreenAdapter> -->
      </div>
    </div>
    
    
    <!-- <div class="footer">
      <Footer />
    </div> -->
  </div>
</template>

<script>
import Footer from "@/views/front/components/Footer";
import Header from "@/views/front/components/Header";
import Screenfull from '@/components/Screenfull'
import ScreenAdapter from '@/components/ScreenAdapter'
import Corner from './components/corner'
import { dataCenterGetReport } from "@/api/front-home";
import MapChartData from './components/MapChartData.vue'
import PieChartData from './components/PieChartData.vue'
import LineChartData from './components/LineChartData.vue'
import BarChartData from './components/BarChartData.vue'
import XBarChartData from './components/XBarChartData.vue'
import CountTo from 'vue-count-to'

export default {
  name: "Data",
  props: {

  },
  components: {
    Footer,
    Header,
    Screenfull,
    ScreenAdapter,
    Corner,
    MapChartData,
    PieChartData,
    LineChartData,
    BarChartData,
    XBarChartData,
    CountTo
  },
  data() {
    return {
      date: '',
      totalData: {},
      pieChartDataList:[],
      procurementData: [],
      times:0,
      lineChartDataList: [],
      barChartDataList: [],
      xBarChartDataList: [],
      totalAmount:0,
      timeFun: {},
      oldTotalAmount:0,
      newTotalAmount:0,
      temp:0
    }
  },
  computed: {

  },
  watch: {},
  methods: {
    updateData() {
      clearTimeout(this.timeFun)

      this.getData(1).then((res) => {
        this.totalData = res && res[0]
        this.totalAmount = Number((this.totalData.zje).toFixed(0)) + 23000000

        // this.temp = this.temp + 100
        // this.totalAmount = this.totalAmount + this.temp

        if (this.newTotalAmount != this.totalAmount) {
          this.oldTotalAmount = this.newTotalAmount
          this.newTotalAmount = this.totalAmount
        }
        this.handleData()
      })

      this.getData(5).then((res) => {
        this.barChartDataList = res
        this.handleData()
      })

      this.getData(5).then((res) => {
        this.pieChartDataList = res
      })
      
      this.getData(3).then(res => {
        this.lineChartDataList = res
      })
      .catch((err) => {
        console.log(err)
      })

      this.getData(4).then((res) => {
        this.xBarChartDataList = res
      })

      let that = this
      this.timeFun = setTimeout(() => {
        that.updateData()
      }, 30000);;
    },
    getData(type) {
      return new Promise((resolve, reject) => {
        dataCenterGetReport(type).then((res) => {
          resolve(res);
        })
        .catch(err => {
          reject(err);
        });
      });
    },
    handleData() {
      if (this.barChartDataList.length > 0 && this.totalData.zje) {
        var result = 0
        for (let index = 0; index < this.barChartDataList.length; index++) {
          const element = this.barChartDataList[index].amount;
          result = result + element
        }
        let amount = this.totalData.zje + 23000000
        this.times = parseInt(amount / (result * 10000))
        // console.log(888, this.times)
      }
    },
    updateTime() {
      var dt = new Date();
      var y = dt.getFullYear();
      var mt = dt.getMonth() + 1;
      var day = dt.getDate();
      var h = dt.getHours(); //获取时
      var m = dt.getMinutes(); //获取分
      var s = dt.getSeconds(); //获取秒
      this.date = "当前时间：" +
        y + "年" +
        mt + "月" +
        day + "日-" +
        h + "时" +
        m + "分" +
        s + "秒";
    }
  },
  created() {
    let that = this
    setInterval(() => {
      that.updateTime()
    }, 1000);
    
    that.updateData()

    this.timeFun = setTimeout(() => {
      that.updateData()
    }, 30000);;
  },
  mounted() {
    
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>
  @font-face {
    font-family: "electronicFont";
    src: url(../../../assets/fonts/DS-DIGIT.ttf);
  }

  .main_section {
    position: absolute;
    top: 176px;
    left: 0;
    width: 100%;
    display: flex;
    height: calc(100% - 176px);
    justify-content: center;
    overflow: scroll;
    overflow-x:hidden;
    background: rgb(3, 37, 191);
    // background: url(http://image.utea88.com/statics/data_map_bg.jpg);

    .main_wrapper {
      width: 1280px;
      height: 720px;
      overflow: hidden;

      .bg_img {
        position: relative;
        width: 100%;
        height: 100%;
      }
    }
  }
  .screenfull {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    background: rgba($color: red, $alpha: 0);
    z-index: 100;
  }
  .bg {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .header {
    position: relative;
    width: 100%;
    .head_bg {
      width: 100%;
      height: auto;
    }

    .title_bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;

      .title {
        position: absolute;
        top: 20px;
        left: 0;
        width: 100%;
        height: 100%;
        color: white;
        line-height: 100%;
        text-align: center;
        font-weight: bold;
      }

      .time {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 100%;
        height: 100%;
        text-align: right;
        color: white;
        line-height: 100%;
        font-weight: bold;
      }
    }
  }

  .corner {
    position: relative;
    flex: 1;
  }
  .number_title {
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    color: white;
    font-weight: bold;
  }

  .number_count {
    font-size: 30px;
    line-height: 30px;
    text-align: center;
    color: #ffc000;
    font-weight: bold;
  }

  .row_space {
    width: 10px;
  }
  .column_space {
    height: 10px;
  }

  .main_box {
    margin: 5px 10px 10px 10px;
    flex: 1;
    display: flex;
    flex-direction: column;

    .top_bg {
      display: flex; 
    }

    .bottom_bg {
      display: flex; 
      position: relative;
      margin-top: 10px;
      width: 100%;
      flex: 1;

      .section {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 22.5%;
        height: 100%;
      }

      .map_section {
        position: relative;
        flex: 1;
        height: 100%;

        .totalAmount_bg {
          width: 100%;
          display: flex;

          .totalAmount_title {
            margin-left: 180px;
            margin-top: 25px;
            font-size: 25px;
            line-height: 25px;
            font-weight: bold;
            text-align: left;
            color: white;
          }
          .totalAmount {
            font-size: 50px;
            line-height: 70px;
            font-weight: bold;
            text-align: center;
            color: #ffc000;
            font-family: "electronicFont";
          }
        }

        .map_box {
          position: relative;
          width: 100%;
          height: calc(100% - 72px);

          .map1 {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url(http://image.utea88.com/statics/data_map_map.png) no-repeat center;
            background-size: 60% auto;
            opacity: 0.5;
          }
          .map2 {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url(http://image.utea88.com/statics/data_map_lbx.png) no-repeat center;
            background-size: 75% auto;
            animation: rotate 15s infinite linear; 
            -webkit-animation: rotate1 15s infinite linear; 
          }
          .map3 {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url(http://image.utea88.com/statics/data_map_jt.png) no-repeat center;
            background-size: 65% auto;
            animation: rotate 15s infinite linear; 
            -webkit-animation: rotate2 15s infinite linear; 
          }
          .map {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }

  @keyframes rotate1 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }

  @keyframes rotate2 {
    0% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
    100% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
  }
  
</style>